<template>
  <view class="consultation-container">
    <!-- 顶部卡片 -->
    <view class="header-card">
      <view class="user-info">
        <image :src="userInfo.avatar" mode="aspectFill" class="avatar" />
        <view class="info">
          <text class="name">{{ userInfo.name }}</text>
          <text class="desc">您好,有什么可以帮您?</text>
        </view>
      </view>
      
      <!-- 快速入口 -->
      <view class="quick-entry">
        <view class="entry-item" @tap="goAIConsult">
          <image src="/static/consultation/ai.png" mode="aspectFit" class="icon" />
          <text>AI问诊</text>
          <text class="tag">免费</text>
        </view>
        <view class="entry-item" @tap="goDoctorConsult">
          <image src="/static/consultation/doctor.png" mode="aspectFit" class="icon" />
          <text>医生问诊</text>
          <text class="tag">¥20起</text>
        </view>
      </view>
    </view>

    <!-- 我的病历 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">我的病历</text>
        <text class="more" @tap="viewAllRecords">查看全部</text>
      </view>
      <scroll-view scroll-x class="record-list" :show-scrollbar="false">
        <view 
          class="record-item"
          v-for="(record, index) in records"
          :key="index"
          @tap="selectRecord(record)"
        >
          <view class="ai-analyze" @tap.stop="analyzeRecord(record)">
            <text class="iconfont icon-ai"></text>
            <text>AI分析</text>
          </view>
          <text class="date">{{ record.date }}</text>
          <text class="hospital">{{ record.hospital }}</text>
          <text class="department">{{ record.department }}</text>
          <text class="diagnosis">{{ record.diagnosis }}</text>
        </view>
      </scroll-view>
    </view>

    <!-- 检查报告 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">检查报告</text>
        <text class="more" @tap="viewAllReports">查看全部</text>
      </view>
      <view class="report-list">
        <view 
          class="report-item"
          v-for="(report, index) in reports"
          :key="index"
          @tap="selectReport(report)"
        >
          <view class="ai-analyze" @tap.stop="analyzeReport(report)">
            <text class="iconfont icon-ai"></text>
            <text>AI分析</text>
          </view>
          <image :src="report.icon" mode="aspectFit" class="icon" />
          <view class="info">
            <text class="name">{{ report.name }}</text>
            <text class="time">{{ report.time }}</text>
          </view>
          <text class="status" :class="report.status">{{ report.statusText }}</text>
        </view>
      </view>
    </view>

    <!-- 常见症状 -->
    <view class="section-card">
      <view class="section-header">
        <text class="title">常见症状</text>
      </view>
      <view class="symptom-grid">
        <view 
          class="symptom-item"
          v-for="(symptom, index) in symptoms" 
          :key="index"
          @tap="consultSymptom(symptom)"
        >
          <image :src="symptom.icon" mode="aspectFit" class="icon" />
          <text>{{ symptom.name }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 用户信息
const userInfo = ref({
  avatar: '/static/avatar/default.jpg',
  name: '张三'
})

// 病历记录
const records = ref([
  {
    date: '2024-03-20',
    hospital: '澳门镜湖医院',
    department: '内科',
    diagnosis: '上呼吸道感染'
  }
  // ...更多记录
])

// 检查报告
const reports = ref([
  {
    icon: '/static/report/blood.png',
    name: '血常规检查',
    time: '2024-03-20',
    status: 'normal',
    statusText: '正常'
  }
  // ...更多报告
])

// 常见症状
const symptoms = ref([
  {
    icon: '/static/symptoms/fever.png',
    name: '发热'
  }
  // ...更多症状
])

// 跳转到AI问诊
const goAIConsult = () => {
  uni.navigateTo({
    url: '/pages/consultation/ai'
  })
}

// 跳转到医生问诊
const goDoctorConsult = () => {
  uni.navigateTo({
    url: '/pages/consultation/chat'
  })
}

// AI分析病历
const analyzeRecord = (record) => {
  uni.navigateTo({
    url: '/pages/consultation/ai',
    success: (res) => {
      // 传递初始消息到AI问诊页面
      const message = `请分析以下病历:\n医院: ${record.hospital}\n科室: ${record.department}\n诊断: ${record.diagnosis}`
      if(res.eventChannel?.emit) {
        res.eventChannel.emit('initMessage', { message })
      }
    }
  })
}

// AI分析报告
const analyzeReport = (report) => {
  uni.navigateTo({
    url: '/pages/consultation/ai',
    success: (res) => {
      // 传递初始消息到AI问诊页面
      const message = `请分析以下检查报告:\n检查项目: ${report.name}\n检查时间: ${report.time}\n检查结果: ${report.status}`
      if(res.eventChannel?.emit) {
        res.eventChannel.emit('initMessage', { message })
      }
    }
  })
}
</script>

<style lang="scss">
.consultation-container {
  min-height: 100vh;
  background: $bg-color;
  padding: 30rpx;

  .header-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .user-info {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .info {
        .name {
          font-size: 32rpx;
          color: $text-primary;
          font-weight: bold;
          margin-bottom: 8rpx;
          display: block;
        }

        .desc {
          font-size: 26rpx;
          color: $text-secondary;
        }
      }
    }

    .quick-entry {
      display: flex;
      gap: 20rpx;

      .entry-item {
        flex: 1;
        height: 160rpx;
        background: $primary-light;
        border-radius: $radius-lg;
        padding: 20rpx;
        position: relative;

        .icon {
          width: 80rpx;
          height: 80rpx;
          margin-bottom: 12rpx;
        }

        text {
          font-size: 28rpx;
          color: $primary-color;
          display: block;
        }

        .tag {
          position: absolute;
          right: 20rpx;
          top: 20rpx;
          font-size: 24rpx;
          padding: 4rpx 12rpx;
          background: rgba($primary-color, 0.1);
          border-radius: $radius-sm;
        }

        &:active {
          transform: scale(0.98);
        }
      }
    }
  }

  .section-card {
    background: #fff;
    border-radius: $radius-lg;
    padding: 30rpx;
    margin-bottom: 30rpx;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 32rpx;
        color: $text-primary;
        font-weight: bold;
      }

      .more {
        font-size: 26rpx;
        color: $text-secondary;
      }
    }
  }

  .record-list {
    white-space: nowrap;

    .record-item {
      display: inline-block;
      width: 300rpx;
      background: $bg-color;
      border-radius: $radius-lg;
      padding: 20rpx;
      margin-right: 20rpx;
      position: relative;

      .ai-analyze {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        display: flex;
        align-items: center;
        padding: 8rpx 16rpx;
        background: rgba($primary-color, 0.1);
        border: 2rpx dashed $primary-color;
        border-radius: $radius-xl;
        
        .iconfont {
          font-size: 28rpx;
          color: $primary-color;
          margin-right: 8rpx;
        }
        
        text {
          font-size: 24rpx;
          color: $primary-color;
        }
        
        &:active {
          opacity: 0.8;
        }
      }

      .date {
        font-size: 26rpx;
        color: $text-secondary;
        margin-bottom: 12rpx;
        display: block;
      }

      .hospital {
        font-size: 28rpx;
        color: $text-primary;
        font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
      }

      .department {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 8rpx;
        display: block;
      }

      .diagnosis {
        font-size: 26rpx;
        color: $primary-color;
      }

      &:active {
        transform: scale(0.98);
      }
    }
  }

  .report-list {
    .report-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid $border-color;
      position: relative;

      &:last-child {
        border-bottom: none;
      }

      .ai-analyze {
        position: absolute;
        right: 20rpx;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        padding: 8rpx 16rpx;
        background: rgba($primary-color, 0.1);
        border: 2rpx dashed $primary-color;
        border-radius: $radius-xl;
        
        .iconfont {
          font-size: 28rpx;
          color: $primary-color;
          margin-right: 8rpx;
        }
        
        text {
          font-size: 24rpx;
          color: $primary-color;
        }
        
        &:active {
          opacity: 0.8;
        }
      }

      .icon {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
      }

      .info {
        flex: 1;

        .name {
          font-size: 28rpx;
          color: $text-primary;
          margin-bottom: 8rpx;
          display: block;
        }

        .time {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }

      .status {
        font-size: 26rpx;
        
        &.normal {
          color: $success;
        }
        
        &.abnormal {
          color: $warning;
        }
      }

      &:active {
        background: $bg-color;
      }
    }
  }

  .symptom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;

    .symptom-item {
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 12rpx;
      }

      text {
        font-size: 26rpx;
        color: $text-regular;
      }

      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style> 